<template>
	<div id="bankcard">

		<div class="count_content">
			<div class="title">
				添加银行卡
			</div>
			<div class="add_form">
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>持卡人</span>
					</div>
					<div class="right_input">
						<el-input :minlength="2" :maxlength="11" v-model="info.name" placeholder="姓名"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>卡号</span>
					</div>
					<div class="right_input">
						<el-input type="tel" :minlength="12" :maxlength="22" v-model="info.cardNumber" placeholder="请输入银行卡号"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>开户行</span>
					</div>
					<div class="right_input">
						<el-select v-model="info.cardType" placeholder="请选择开户行" @change="changeType()">
							<el-option v-for="(value,key) in $store.state.bank_type" :key="key" :label="value" :value="key">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>卡类型</span>
					</div>
					<div class="right_input">
						<el-input value="储蓄卡" placeholder="储蓄卡" :disabled="true"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>手机号</span>
					</div>
					<div class="right_input">
						<el-input type="tel" :minlength="11" :maxlength="11" v-model="info.phone" placeholder="请输入银行预留手机号"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input">
						<el-checkbox v-model="agree">同意用户协议</el-checkbox>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input" @click="submit">
						<div class="infobtn my-flex-center">
							确定
						</div>
					</div>
				</div>
			</div>
			<div class="title second_title">
				银行卡管理
			</div>
			<div class="countlist">
				<el-table :data="list" border style="width: 100%">

					<el-table-column prop="name" label="持卡人">
					</el-table-column>
					<el-table-column prop="cardNumber" label="卡号">
					</el-table-column>
					<el-table-column prop="cardTypeCN" label="开户行">
					</el-table-column>
					<el-table-column prop="phone" label="手机号">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="danger" size="small" @click="unbindCard(scope.$index, scope.row)">解除绑定</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

		</div>

	</div>
</template>

<script>
	import $ from 'jquery';
	import service from '@/js/services/bankmanage.js';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading', 'hasPermission'],

		data() {
			return {
				currrentId: 8,
				test: [],
				params: {
					pageNum: 1,
					pageSize: 30
				},
				list: [],
				id: null,
				info: {
					name: '',
					cardNumber: '', //卡号
					cardTypeCN: '',
					cardType: '', //卡类型(农业或建设或招商或中国银行)(必填)
					effectiveDate: '', //有效日期(必填)
					defaultCard: '' //是否为默认绑定银行卡;true:是;false:否(必填)
				},
				bankCategory: {
					cardTypeCN: null
				},
				modelData: {},
				stepGo: true,
				agree: false,
				saveText: '下一步',
				fromUrl: null
			}
		},
		mounted() {
			let arr = ['bank_type'];
			this.tool.getDirByKey(this, arr)
				.then(() => {

				})
//			console.log(this.$store.state.bank_type);
			this.getBankList();
		},
		methods: {
			...service,
			
			submit() {
				this.handleSave();
			},
			unbindCard(index, row) {
				this.id = row.id;
				this.$confirm('确认要解除绑定吗？')
					.then(_ => {
						this.unbindCards();
					})
					.catch(_ => {});

			},
		}
	}
</script>

<style lang="less" src="../../less/page/bankcard/index.less"></style>